<template>
  <div>
    <div>
    <div class="systemMessage">
      <div class="yxncsyl">
        <h4>运行内存使用率</h4>
        <el-progress
          type="circle"
          :percentage="memInfo"
          :color="memoryUsageColors"
        >
        </el-progress>
      </div>
      <div class="cpu">
        <h4>CPU使用率</h4>
        <el-progress
          type="circle"
          :percentage="cpuUseage"
          :color="memoryUsageColors"
        >
        </el-progress>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      interval: null,
      cpuUseage: 0,
      memInfo: 0,
      setInterval:null,
      memoryUsageColors: [
        { color: "#00ff80", percentage: 20 },
        { color: "#0040ff", percentage: 40 },
        { color: "#ffbf00", percentage: 60 },
        { color: "#ffff00", percentage: 80 },
        { color: "#ff0000", percentage: 100 },
      ],
    };
  },
  created() {
    this.getSystem();
  },
  methods: {
    getSystem() {
      this.Chat.on("SystemData",data=>{
        var json=data.data;
        console.log(json);
        this.cpuUseage=json.cpu;
        this.memInfo=json.usage;
      })
      
    },
  },
  destroyed(){
    window.clearInterval(this.setInterval);
    this.Chat.off("SystemData")
  }
};
</script>
<style>
.systemMessage {
  box-sizing: border-box;
  background-color: beige;
  height: 240px;
}
.cpu {
  position: absolute;
  margin-left: 400px;
  top: 200px;
  transform: translate(0, -50%);
}
.yxncsyl {
  position: absolute;
  margin-left: 50px;
  top: 200px;
  transform: translate(0, -50%);
}
</style>
